/*
 * Copyright(C) 2019 FUYUN DATA SERVICES CO.,LTD. - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * 该源代码版权归属福韵数据服务有限公司所有
 * 未经授权，任何人不得复制、泄露、转载、使用，否则将视为侵权
 *
 */

import * as React from "react";
import { connect } from "react-redux";
import { IRootState, Dispatch } from "../../../../store";
import { Form, Table, Input, Button } from "antd";

import { FormComponentProps } from "antd/lib/form";
import TitleCard from "src/components/TitleCard";
import moment from "moment";

const mapStateToProps = ({ goods, loading }: IRootState) => ({
  goods,
  loading: loading.effects.goods.getGoodsList as any
});
const mapDispatchToProps = ({ goods }: Dispatch) => ({
  getGoodsList: (payload: any) => goods.getGoodsList(payload)
});

type connectedProps = ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps>;

interface IState {
  visible: boolean;
  edit: boolean;
  searchValue: string;
  currPage: number;
}

interface IProps extends connectedProps {
  loading: boolean;
}

class GoodsDetail extends React.Component<IProps & FormComponentProps, IState> {
  public state = {
    visible: false,
    edit: true,
    searchValue: "",
    currPage: 0
  };

  public componentDidMount = () => {
    const { getGoodsList } = this.props;

    getGoodsList({
      size: "10",
      name: ""
    });
  };

  public handleSearch = () => {
    const { getGoodsList } = this.props;
    getGoodsList({
      size: "10",
      name: this.state.searchValue
    });
  };

  public handleOk = () => {
    this.setState({
      visible: false
    });
  };

  public handleCancel = () => {
    this.setState({
      visible: false
    });
  };

  public handleDetail = () => {
    this.setState({
      visible: true
    });
  };

  public inputChange = (value: any) => {
    this.setState({
      searchValue: value.target.value
    });
  };

  public changePage(pageNumber: any, pageSize: any, props: any) {
    const { getGoodsList } = this.props;
    const payload = {
      name: this.state.searchValue,
      page: pageNumber - 1,
      size: pageSize
    };
    this.setState({
      currPage: pageNumber
    });

    getGoodsList(payload);
  }

  public tableRender() {
    const { goodsList } = this.props.goods;
    const column = [
      {
        title: "序号",
        dataIndex: "seq",
        render: (text: any, record: any, index: any) => {
          return index + 1;
        }
      },
      {
        title: "产品名称",
        dataIndex: "product"
      },
      {
        title: "商品名称",
        dataIndex: "name"
      },
      {
        title: "商品批次",
        dataIndex: "productBatch"
      },
      {
        title: "产品规格",
        dataIndex: "spec"
      },
      {
        title: "生产时间",
        dataIndex: "productionTime",
        render: (text: any, record: any, index: any) => {
          return (
            <span>
              {text ? moment(text).format("YYYY-MM-DD HH:mm:ss") : " - -"}
            </span>
          );
        }
      }
    ];

    return (
      <Table
        dataSource={goodsList}
        columns={column}
        rowKey={"id"}
        pagination={{
          current: this.state.currPage,
          total: this.props.goods.pageTotal,
          onChange: (page, size) => this.changePage(page, size, this.props)
        }}
      />
    );
  }

  public render() {
    return (
      <div className="message-container" style={{ paddingTop: 32 }}>
        <div style={{ marginLeft: "20px" }}>
          <b>商品名称:</b>
          <Input
            style={{ width: "200px", marginLeft: "10px" }}
            onChange={e => this.inputChange(e)}
          />
          <Button
            type="primary"
            onClick={this.handleSearch}
            style={{ marginLeft: "10px" }}
          >
            查询
          </Button>
        </div>

        <TitleCard style={{ paddingTop: 32 }}>{this.tableRender()}</TitleCard>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Form.create<IProps & FormComponentProps>({})(GoodsDetail));
